<template>
	<view class="container" v-if="detail.goods_id">
		<view class="swiper">
			<swiper :autoplay="autoplay" @change="setCurrent" class="banner-box  swiper-box" :duration="duration" :indicator-dots="indicatorDots" :interval="interval" :circular="true">
				<swiper-item v-for="(item, index) in detail.image" :key="index" @tap="onPreviewImages" :data-index="index"><image class="slide-image" mode="aspectFill" :src="item.file_path"></image></swiper-item>
			</swiper>
			<view class="banner-num">
				<text>{{ currentIndex }}</text>
				<text>/{{ detail.image.length }}</text>
			</view>
		</view>
		<!-- 团购提醒 -->
		<view class="goods-attention dis-flex flex-y-center">
			<!-- 商品价格 -->
			<view class="goods-price">
				<text class="price-currency f-26">￥</text>
				<text class="price-text">{{ sharing_price }}</text>
			</view>
			<view class="goods-message">
				<view class="line-price" v-if="line_price > 0">
					<text class="f-22">￥</text>
					<text class="f-26">{{ line_price }}</text>
				</view>
				<view class="dis-flex flex-y-center">
					<view class="in-tag f-24">团购中</view>
					<view class="in-txt f-24">
						<text></text>
						{{ detail.goods_sales }}人已参团
					</view>
				</view>
			</view>
		</view>
		<view class="goods-name b-f">
			<!-- 商品名称 -->
			<view class="dis-flex flex-y-center">
				<view class="flex-box dis-flex flex-dir-column">
					<view class="goods-title">
						<view class="title f-30 twolist-hidden">
							<text class="col-m f-28">[{{ detail.people }}人团]</text>
							<text>{{ detail.goods_name }}</text>
						</view>
					</view>
				</view>
				<!-- 分享按钮 -->
				<view class="goods__share">
					<form @submit="onClickShare" report-submit="true">
						<button formType="submit" class="btn-normal dis-flex flex-dir-column">
							<text class="share__icon suifont sui-fenxiang"></text>
							<text class="f-24">分享</text>
						</button>
					</form>
				</view>
			</view>
			<!-- 商品卖点 -->
			<view class="goods-selling-point">
				<text class="f-24">{{ detail.selling_point }}</text>
			</view>
		</view>
		<!-- 选择商品规格 -->
		<form v-if="detail.spec_type == 20" @submit="onToggleTrade" report-submit>
			<button class="btn-normal" formType="submit">
				<view class="sku-selector cont-box b-f m-top20 dis-flex flex-y-center">
					<view class="flex-box f-28">
						<text class="col-9">选择：</text>
						<text v-for="(item, index) in goodsMultiSpec.spec_attr" :key="index">{{ item.group_name }}</text>
					</view>
					<view class="f-26 col-9 t-r"><text class="suifont sui-xiangyoujiantou"></text></view>
				</view>
			</button>
		</form>
		<!-- 商品评价 -->
		<view class="goods-comment" v-if="detail.comment_data_count > 0">
			<view class="cont-box b-f goods-property-box m-top20">
				<text class="col-3 f-30">评价 ({{ detail.comment_data_count }}条)</text>
				<form @submit="onTargetToComment" report-submit="true" class="comment-num">
					<button formType="submit" class="btn-normal"><text class="f-28">查看更多</text></button>
				</form>
				<view class="goods-property-jianTou"><text class="suifont sui-xiangyoujiantou user-orderJtou" style="margin-top:0;"></text></view>
			</view>
			<view class="goods-comment-box b-f" v-for="(item, index) in detail.comment_data" :key="index">
				<view class="cont-box goods-comment-box b-t b-f b-b">
					<view class="dis-flex">
						<view class="user">
							<text class="user_name f-26">{{ item.user.nickName }}</text>
						</view>
						<view class="com_xing">
							<text class="suifont sui-shoucang active"></text>
							<block v-if="item.score < 30">
								<text class="suifont sui-shoucang active"></text>
								<text class="suifont sui-shoucang active"></text>
							</block>
							<block v-if="item.score < 20">
								<text class="suifont sui-shoucang active"></text>
								<text class="suifont sui-shoucang active"></text>
							</block>
						</view>
					</view>
					<view class="goods-comment-cont m-top20">
						<text class="f-26 twolist-hidden">{{ item.content }}</text>
					</view>
					<view class="f-22 col-9 m-top10">{{ item.create_time }}</view>
				</view>
			</view>
		</view>
		<!-- 进行中的团购 -->
		<view class="top-nav-bar m-top20 b-f" v-if="activeList.length">
			<view class="top-nav dis-flex flex-x-between">
				<text>进行中的团购</text>
				<!-- <text class="col-9">更多团购 <text class="suifont sui-xiangyoujiantou"></text> </text> -->
			</view>
			<!-- 进行中的团购-内容部分 -->
			<view class="corwd" v-for="(item, index) in activeList" :key="index" @tap="onTargetActive" :data-id="item.active_id">
				<view class="corwd_people">
					<!-- 进行中的团购-头像 -->
					<view class=""><image :src="item.user.avatarUrl" class="corwd_people_images"></image></view>
					<!-- 进行中的团购-名称 -->
					<text class="onelist-hidden">{{ item.user.nickName }}的团</text>
				</view>
				<view class="corwd_time">
					<view class="corwd_time_text">
						<!-- 进行中的团购-开团人数 -->
						<text class="corwd_time_title onelist-hidden">
							还差
							<text>{{ item.people - item.actual_people }}</text>
							人成团
						</text>
						<!-- 进行中的团购-倒计时 -->
						<text class="corwd_time_number col-9 onelist-hidden" v-if="countDownList[index]">剩余{{ countDownList[index].day }}天{{ countDownList[index].hou }}:{{ countDownList[index].min }}:{{ countDownList[index].sec }}</text>
					</view>
					<!-- 进行中的团购-按钮 -->
					<button>去参团</button>
				</view>
			</view>
		</view>
		<!-- 拼团玩法 -->
		<view class="rule-nav top-nav-bar m-top20 b-f">
			<form @submit="onToggleRules" report-submit="true">
				<button formType="submit" class="btn-normal">
					<view class="top-nav dis-flex flex-x-between">
						<text>拼团玩法</text>
						<text class="f-25 col-9">查看规则</text>
					</view>
					<!-- 拼团步骤 -->
					<view class="rule-simple dis-flex flex-x-around">
						<view class="simple-item dis-flex flex-dir-column flex-y-center">
							<view class="i-number dis-flex flex-x-center flex-y-center"><text class="f-30">1</text></view>
							<view class="i-text f-28">选择商品</view>
						</view>
						<view class="simple-item dis-flex flex-dir-column flex-y-center">
							<view class="i-number dis-flex flex-x-center flex-y-center"><text class="f-30">2</text></view>
							<view class="i-text f-28">开团/参团</view>
						</view>
						<view class="simple-item dis-flex flex-dir-column flex-y-center">
							<view class="i-number dis-flex flex-x-center flex-y-center"><text class="f-30">3</text></view>
							<view class="i-text f-28">邀请好友</view>
						</view>
						<view class="simple-item dis-flex flex-dir-column flex-y-center">
							<view class="i-number dis-flex flex-x-center flex-y-center"><text class="f-30">4</text></view>
							<view class="i-text f-28">人满成团</view>
						</view>
					</view>
				</button>
			</form>
		</view>
		<!-- 商品描述 -->
		<view class="p-bottom">
			<view class="top-nav m-top20 b-f b-b"><view class="top-nav-bar">商品描述</view></view>
			<view class="order">
				<view v-if="detail.content != ''">
					<view class="b-f goods-detail-box">
						<u-parse :html="content" :autosetTitle="false" :lazy-load="true"></u-parse>
						<!-- <rich-text :nodes="content"></rich-text> -->
						<!-- <view class="goods-cont-li"> -->
						<!-- <template is="wxParse" data="{{wxParseData:content.nodes}}"></template> -->
						<!-- </view> -->
					</view>
				</view>
				<view v-else>
					<view class="yoshop-notcont">
						<text class="suifont sui-wushuju"></text>
						<text class="cont">亲,此处暂无详情数据</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部操作栏 -->
		<view class="footer-fixed f-28">
			<!-- 返回主页 -->
			<form @submit="onNavigationHome" report-submit="true">
				<button formType="submit" class="btn-normal">
					<view class="goods-fixed-icon dis-flex flex-x-center flex-y-center"><text class="suifont sui-zhuye"></text></view>
				</button>
			</form>
			<!-- 在线客服 -->
			<view class="goods-fixed-icon dis-flex flex-x-center flex-y-center">
				<!-- #ifdef MP -->
				<button open-type="contact" sessionFrom="weapp" size="27" style="opacity: 0;position:absolute;top:0px;left:0px;display:block;width:100%;height:100%;" type="default-light"></button>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<button @tap="callPhone" size="27" style="opacity: 0;position:absolute;top:0px;left:0px;display:block;width:100%;height:100%;" type="default-light"></button>
				<!-- #endif -->
				<text class="suifont sui-kefu"></text>
			</view>
			<!-- 购买按钮 -->
			<view class="fixed-buttons flex-box dis-flex">
				<view v-if="detail.is_alone == 0" class="order-number flex-box dis-flex flex-dir-column flex-x-center">
					<form @submit="onTriggerOrder" report-submit="true" data-type="10">
						<button formType="submit" class="btn-normal">
							<view class="f-26">￥{{ goods_price }}</view>
							<view>单独购买</view>
						</button>
					</form>
				</view>
				<view class="order-bt flex-box dis-flex flex-dir-column flex-x-center">
					<form @submit="onTriggerOrder" report-submit="true" data-type="20">
						<button formType="submit" class="btn-normal col-f">
							<view class="f-26">￥{{ sharing_price }}</view>
							<view>发起拼单</view>
						</button>
					</form>
				</view>
			</view>
		</view>
		<!-- 确认购买弹窗 -->
		<popup :show="showBottomPopup" type="bottom" @dclose="onToggleTrade">
			<view class="popup__trade">
				<!-- 关闭按钮 -->
				<view class="trade-close dis-flex flex-x-center flex-y-center">
					<form @submit="onToggleTrade" report-submit="true">
						<button formType="submit" class="btn-normal"><text class="suifont sui-close f-26"></text></button>
					</form>
				</view>
				<!-- 主体信息 -->
				<view class="trade-main">
					<view class="goods-info dis-flex">
						<!-- 图片名称 -->
						<view class="goods-image" @tap="onPreviewSkuImage"><image :src="skuCoverImage"></image></view>
						<view class="right flex-box">
							<view class="money-box dis-flex flex-y-end">
								<!-- 商品价 -->
								<view class="goods-price">
									<text class="col-m f-26">￥</text>
									<text class="goods-price_num col-m f-40">{{ order_type == 10 ? goods_price : sharing_price }}</text>
								</view>
								<!-- 划线价 -->
								<view class="line-price" v-if="line_price > 0">
									<text>￥{{ line_price }}</text>
								</view>
							</view>
							<view class="goods-stock dis-flex">
								<text class="flex-box f-26 col-7">库存：{{ stock_num }}</text>
							</view>
						</view>
					</view>
					<!-- 规格列表 -->
					<view class="goods-attr" v-if="detail.spec_type == 20">
						<!-- 滚动容器 -->
						<scroll-view class="goods-attr--scroll" scroll-y=" true ">
							<view class="group-item" v-for="(attr, attr_idx) in goodsMultiSpec.spec_attr" :key="attr_idx">
								<view class="tips-text" :data-id="attr.group_id">{{ attr.group_name }}</view>
								<view class="spec-item" :class="{ cur: item.checked }" v-for="(item, item_idx) in attr.spec_items" :key="item_idx" :data-attr-idx="attr_idx" :data-item-idx="item_idx" @tap="onSwitchSpec">{{ item.spec_value }}</view>
							</view>
						</scroll-view>
					</view>
					<!-- 购买数量 -->
					<view class="buy_number">
						<view class="buyNumber f-26"><text>购买数量</text></view>
						<view class="selectNumber">
							<form @submit="onDecGoodsNumber" report-submit="true"><button formType="submit" class="default" :class="{ 'default-active': !(goods_num > 1) }" type="default">-</button></form>
							<input type="number" v-model="goods_num" />
							<form @submit="onIncGoodsNumber" report-submit="true"><button formType="submit" class="default" type="default">+</button></form>
						</view>
					</view>
				</view>
				<!-- 底部操作栏 -->
				<view class="footer-fixed f-30">
					<block v-if="stock_num > 0">
						<view class="order-bt dis-flex flex-x-center flex-y-center" @tap="onCheckout"><text>确定</text></view>
					</block>
					<view class="default-btn" v-else>暂无现货</view>
				</view>
			</view>
		</popup>
		<!-- 返回顶部 -->
		<view class="widget-goTop" v-if="floorstatus">
			<form @submit="onScrollTop" report-submit="true">
				<button formType="submit" class="btn-normal"><text class="suifont sui-fanhuidingbu"></text></button>
			</form>
		</view>
		<!-- 商品海报 弹出层 -->
		<popup :show="share.showPopup" @close="onTogglePopup">
			<view class="pop-poster pop-example__container">
				<!-- 关闭按钮 -->
				<view class="pop-close dis-flex flex-x-center flex-y-center" @tap="onTogglePopup"><text class="suifont sui-shanchu f-30 col-9"></text></view>
				<form @submit="onSavePoster" report-submit="true">
					<view class="poster__image"><image mode="widthFix" :src="qrcode"></image></view>
					<view class="poster__tips m-top10 t-c"></view>
					<view class="padding-box m-top10 profile-btn"><button formType="submit">保存图片</button></view>
				</form>
			</view>
		</popup>
		<!-- 拼团规则 -->

		<custom-dialog ref="ruleDialog"></custom-dialog>
		<!-- 快捷导航 -->
		<shortcut id=""></shortcut>
		<actionsheet :show="share.show" :actions="share.actions" :cancel-text="share.cancelText" :cancel-with-mask="share.cancelWithMask" @cancel="onCloseShare" @actionclick="onClickShareItem" mask-class="tiny" />
	</view>
</template>

<script>
let goodsSpecArr = [];
import Share from '@/utils/Share.js';
import actionsheet from '@/components/actionsheet/index.vue';
import Tools from '@/utils/Tools.js';
import shortcut from '@/components/shortcut/shortcut.vue';
import popup from '@/components/popup/index.vue';
import CountDown from '@/utils/countdown.js';

import customDialog from '@/components/dialog/index.vue';
import Dialog from '@/components/dialog/dialog.js';
// 枚举类：秒杀活动商品状态
import ActiveStatusEnum from '@/utils/enum/sharp/GoodsStatus.js';
import SharingMixins from '@/mixins/sharing-mixins.js';
export default {
	components: {
		popup,
		shortcut,
		customDialog,
		actionsheet
	},
	mixins: [SharingMixins],
	data() {
		return {
			active: {},
			indicatorDots: true, // 是否显示面板指示点
			autoplay: true, // 是否自动切换
			interval: 3000, // 自动切换时间间隔
			duration: 800, // 滑动动画时长

			currentIndex: 1, // 轮播图指针
			floorstatus: false, // 返回顶部
			showView: true, // 显示商品规格

			detail: {}, // 商品详情信息
			sharing_price: 0, // 拼团价格
			goods_price: 0, // 单买价
			line_price: 0, // 划线价格
			stock_num: 0, // 库存数量

			order_type: 20, // 下单类型 10=>单独购买 20=>拼团
			goods_num: 1, // 商品数量
			goods_sku_id: 0, // 规格id
			cart_total_num: 0, // 购物车商品总数量
			goodsMultiSpec: {}, // 多规格信息

			countDownList: [], // 时间记录
			actEndTimeList: [],
			activeList: [],
			skuCoverImage: '',

			// 分享按钮组件
			share: Share.actionList(),
			qrcode: '',
			setting: {},
			content: '',
			specData: {},
			showBottomPopup: false,
			tel: ''
		};
	},
	onLoad(e) {
		const scene = Tools.getSceneData(e);
		// 商品id
		this.goods_id = e.goods_id ? e.goods_id : scene.gid;
		// 获取商品信息
		this.getGoodsDetail();
		// 获取拼团设置
		this.getSetting();
		this.getTel();
	},
	/**
	 * 分享当前页面
	 */
	onShareAppMessage() {
		// 构建页面参数
		let params = Tools.getShareUrlParams({
			goods_id: this.goods_id
		});
		return {
			title: this.detail.goods_name,
			path: '/pages/sharing/goods/index?' + params
		};
	},
	onPageScroll(e) {
		this.floorstatus = e.scrollTop > 200;
	},
	methods: {
		/**
		 * 获取客服电话
		 */
		getTel() {
			// this.$get(this.$api.getParameterTel, {}, res => {
			// 	this.tel = res.data.tel;
			// });
		},
		/**
		 * 拨打客服电话
		 */
		callPhone() {
			uni.makePhoneCall({
				phoneNumber: this.tel
			});
		},
		setShare() {
			// #ifdef H5
			// this.$wechat.updateAppMessageShareData({
			// 	title: this.detail.goods_name, // 分享标题
			// 	desc: '', // 分享描述
			// 	link: Tools.getShareUrl(Tools.getPagePath(), { goods_id: this.goods_id }), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			// 	imgUrl: this.skuCoverImage // 分享图标
			// });
			// this.$wechat.onMenuShareTimeline({
			// 	title: this.detail.goods_name, // 分享标题
			// 	link: Tools.getShareUrl(Tools.getPagePath(), { goods_id: this.goods_id }), // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
			// 	imgUrl: this.skuCoverImage // 分享图标
			// });
			// #endif
		},
		/**
		 * 设置轮播图当前指针 数字
		 */
		setCurrent(e) {
			this.currentIndex = e.detail.current + 1;
		},
		/**
		 * 点击切换不同规格
		 */
		onSwitchSpec(e) {
			const attrIdx = e.currentTarget.dataset.attrIdx;
			const itemIdx = e.currentTarget.dataset.itemIdx;
			const goodsMultiSpec = this.goodsMultiSpec;

			// 记录formid

			for (let i in goodsMultiSpec.spec_attr) {
				for (let j in goodsMultiSpec.spec_attr[i].spec_items) {
					if (attrIdx == i) {
						goodsMultiSpec.spec_attr[i].spec_items[j].checked = false;
						if (itemIdx == j) {
							goodsMultiSpec.spec_attr[i].spec_items[itemIdx].checked = true;
							goodsSpecArr[i] = goodsMultiSpec.spec_attr[i].spec_items[itemIdx].item_id;
						}
					}
				}
			}
			this.goodsMultiSpec = goodsMultiSpec;

			// 更新商品规格信息
			this.updateSpecGoods();
		},
		/**
		 * 更新商品规格信息
		 */
		updateSpecGoods() {
			let specSkuId = goodsSpecArr.join('_');

			// 查找skuItem
			let spec_list = this.goodsMultiSpec.spec_list;
			let skuItem = spec_list.find(val => {
				return val.spec_sku_id == specSkuId;
			});

			// 记录goods_sku_id
			// 更新商品价格、划线价、库存
			if (typeof skuItem === 'object') {
				this.goods_sku_id = skuItem.spec_sku_id;
				this.goods_price = skuItem.form.goods_price;
				this.sharing_price = skuItem.form.sharing_price;
				this.line_price = skuItem.form.line_price;
				this.stock_num = skuItem.form.stock_num;
				this.skuCoverImage = skuItem.form.image_id > 0 ? skuItem.form.image_path : _this.data.detail.goods_image;
			}
		},
		onScrollTop() {
			uni.pageScrollTo({
				scrollTop: 0
			});
		},
		/**
		 * 增加商品数量
		 */
		onIncGoodsNumber(e) {
			this.goods_num = ++this.goods_num;
		},

		/**
		 * 减少商品数量
		 */
		onDecGoodsNumber(e) {
			if (this.goods_num > 1) {
				this.goods_num = --this.goods_num;
			}
		},
		/**
		 * 确认购买
		 */
		onCheckout() {
			// 表单验证
			if (!this.onVerify()) {
				return false;
			}
			// 立即购买
			Route.navigateTo({
				url:
					'../checkout/index?' +
					Tools.urlEncode({
						order_type: this.order_type,
						goods_id: this.goods_id,
						goods_num: this.goods_num,
						goods_sku_id: this.goods_sku_id
					}),
				success: () => {
					// 关闭弹窗
					this.onToggleTrade();
				}
			});
		},
		/**
		 * 表单验证
		 */
		onVerify() {
			if (this.goods_num === '') {
				Tools.showError('请输入购买数量');
				return false;
			}
			// 将购买数量转为整型，防止出错
			this.goods_num = parseInt(this.goods_num);

			if (this.goods_num <= 0) {
				Tools.showError('购买数量不能为0');
				return false;
			}
			return true;
		},
		/**
		 * 浏览商品图片
		 */
		onPreviewImages(e) {
			let index = e.currentTarget.dataset.index;
			let imageUrls = [];
			this.detail.image.forEach(item => {
				imageUrls.push(item.file_path);
			});
			uni.previewImage({
				current: imageUrls[index],
				urls: imageUrls
			});
		},
		/**
		 * 预览Sku规格图片
		 */
		onPreviewSkuImage(e) {
			uni.previewImage({
				current: this.image_path,
				urls: [this.image_path]
			});
		},
		/**
		 * 跳转到评论
		 */
		onTargetToComment(e) {
			this.navigateTo({
				url: './comment/comment?goods_id=' + this.goods_id
			});
		},
		/**
		 * 显示分享选项
		 */
		onClickShare(e) {
			this.$set(this.share, 'show', true);
		},
		/**
		 * 关闭分享选项
		 */
		onCloseShare() {
			this.$set(this.share, 'show', false);
		},
		/**
		 * 点击生成商品海报
		 */
		onClickShareItem(e) {
			getCurrentPages();
			if (e.index == 0) {
				// 显示商品海报
				this.showPoster();
			} else if (e.index == 1) {
				Share.send(Tools.getShareUrl(Tools.getPagePath(), { goods_id: this.goods_id }));
			}
			this.onCloseShare();
		},
		/**
		 * 显示商品海报图
		 */
		showPoster() {
			this.$u.api.getSharingGoodsPoster(this.goods_id).then(res => {
				this.qrcode = res.data.qrcode;
				this.$nextTick(() => {
					this.onTogglePopup();
				});
			});
		},
		/**
		 * 倒计时函数
		 */
		countDown() {
			// 获取当前时间，同时得到活动结束时间数组
			let newTime = new Date().getTime();
			let endTimeList = this.actEndTimeList;
			let countDownArr = [];
			// 对结束时间进行处理渲染到页面
			endTimeList.forEach(o => {
				let endTime = new Date(Tools.formatDate(o)).getTime();
				let obj = null;
				// 如果活动未结束，对时间进行处理
				if (endTime - newTime > 0) {
					let time = (endTime - newTime) / 1000;
					// 获取天、时、分、秒
					let day = parseInt(time / (60 * 60 * 24));
					let hou = parseInt((time % (60 * 60 * 24)) / 3600);
					let min = parseInt(((time % (60 * 60 * 24)) % 3600) / 60);
					let sec = parseInt(((time % (60 * 60 * 24)) % 3600) % 60);
					obj = {
						day: day,
						hou: this.timeFormat(hou),
						min: this.timeFormat(min),
						sec: this.timeFormat(sec)
					};
				} else {
					//活动已结束，全部设置为'00'
					obj = {
						day: '00',
						hou: '00',
						min: '00',
						sec: '00'
					};
				}
				countDownArr.push(obj);
			});
			// 渲染，然后每隔一秒执行一次倒计时函数
			this.countDownList = countDownArr;
			setTimeout(this.countDown, 1000);
		},
		/**
		 * 获取商品信息
		 */
		getGoodsDetail() {
			this.$u.api.getSharingGoodsInfo(this.goods_id).then(res => {
				let data = this.initGoodsDetailData(res.data);
				console.log(data);
				this.actEndTimeList = data.actEndTimeList;
				this.activeList = data.activeList;
				this.detail = data.detail;
				this.goodsMultiSpec = data.goodsMultiSpec;
				this.goods_price = data.goods_price;
				this.goods_sku_id = data.goods_sku_id;
				this.line_price = data.line_price;
				this.sharing_price = data.sharing_price;
				this.skuCoverImage = data.skuCoverImage;
				this.specData = data.specData;
				this.stock_num = data.stock_num;
				setTimeout(() => {
					this.countDown();
					uni.setNavigationBarTitle({
						title: data.detail.goods_name
					});
					// #ifdef H5
					// this.$wechat.initJssdk(this.setShare());
					// #endif
				}, 0);
			});
		},
		/**
		 * 初始化商品详情数据
		 */
		initGoodsDetailData(data) {
			// 商品详情
			let goodsDetail = data.detail;
			// 富文本转码

			if (goodsDetail.content.length > 0) {
				this.content = Tools.formatRichText(goodsDetail.content);
			}
			// 商品价格/划线价/库存
			data.goods_sku_id = goodsDetail.goods_sku.spec_sku_id;
			data.goods_price = goodsDetail.goods_sku.goods_price;
			data.sharing_price = goodsDetail.goods_sku.sharing_price;
			data.line_price = goodsDetail.goods_sku.line_price;
			data.stock_num = goodsDetail.goods_sku.stock_num;
			// 商品封面图(确认弹窗)
			data.skuCoverImage = goodsDetail.goods_image;
			// 多规格商品封面图(确认弹窗)
			if (goodsDetail.spec_type == 20 && goodsDetail.goods_sku['image']) {
				data.skuCoverImage = goodsDetail.goods_sku['image']['file_path'];
			}
			// 初始化商品多规格
			if (goodsDetail.spec_type == 20) {
				data.goodsMultiSpec = this.initManySpecData(goodsDetail.goods_multi_spec);
			}
			// 记录倒计时时间
			data['actEndTimeList'] = [];
			if (data.activeList.length > 0) {
				data.activeList.forEach(item => {
					data['actEndTimeList'].push(item.end_time.text);
				});
			}
			return data;
		},
		/**
		 * 初始化商品多规格
		 */
		initManySpecData(data) {
			goodsSpecArr = [];
			for (let i in data.spec_attr) {
				for (let j in data.spec_attr[i].spec_items) {
					if (j < 1) {
						data.spec_attr[i].spec_items[0].checked = true;
						goodsSpecArr[i] = data.spec_attr[i].spec_items[0].item_id;
					}
				}
			}
			return data;
		},
		/**
		 * 立即下单
		 */
		onTriggerOrder(e) {
			// 设置当前购买类型
			this.order_type = e.currentTarget.dataset.type;
			this.$nextTick(() => {
				this.onToggleTrade();
			});
		},
		/**
		 * 确认购买弹窗
		 */
		onToggleTrade(e) {
			if (typeof e === 'object') {
				// 记录formId
				e.detail.hasOwnProperty('formId') && this.$saveFormId(e.detail.formId);
			}
			this.showBottomPopup = !this.showBottomPopup;
		},
		/**
		 * 显示拼团规则
		 */
		onToggleRules(e) {
			// 记录formId

			// 显示拼团规则
			Dialog({
				title: '拼团规则',
				message: this.setting.basic.rule_detail,
				selector: 'ruleDialog',
				buttons: [
					{
						text: '关闭',
						color: 'red',
						type: 'cash'
					}
				]
			});
		},
		/**
		 * 返回主页
		 */
		onNavigationHome(e) {
			Route.navigateTo({
				url: '/pages/index/index'
			});
		},
		/**
		 * 小于10的格式化函数
		 */
		timeFormat(param) {
			return param < 10 ? '0' + param : param;
		},
		/**
		 * 跳转到拼单页面
		 */
		onTargetActive(e) {
			Route.navigateTo({
				url: '../active/index?active_id=' + e.currentTarget.dataset.id
			});
		},
		/**
		 * 切换商品海报
		 */
		onTogglePopup() {
			this.$set(this.share, 'showPopup', !this.share.showPopup);
		}
	}
};
</script>

<style>
/* wxParse.wxss */

.slide-image {
	background: #fff;
}

.banner-box {
	height: 750rpx;
	/* border-bottom: 1rpx solid #e4e4e4; */
}

.user-orderJtou {
	color: #999;
	font-size: 26rpx;
	position: absolute;
	top: 50%;
	margin-top: -9rpx;
}

/* 底部操作栏 */

.footer-fixed .goods-fixed-icon {
	width: 100rpx;
	background: #fff;
	margin: 0 auto;
	padding: 0 6rpx;
	border-left: 1rpx solid #eee;
	height: 92rpx;
	position: relative;
}

.footer-fixed .goods-fixed-icon:first-child {
	border-left: none;
}

.footer-fixed .goods-fixed-icon image {
	width: 56rpx;
	height: 56rpx;
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -28rpx;
	top: 50%;
	margin-top: -26rpx;
}

.footer-fixed .goods-fixed-icon text {
	color: #7a7e83;
	font-size: 48rpx;
}

.footer-fixed .goods-fixed-icon .icon-shoucang {
	font-size: 40rpx;
}

.footer-fixed .goods-fixed-icon .s_cont {
	color: #ff495e;
}

.footer-fixed .fixed-buttons {
	height: 100%;
}

.footer-fixed .fixed-buttons .order-bt {
	width: auto;
	line-height: unset;
	height: 100%;
}

.footer-fixed .fixed-buttons .order-number {
	height: 100%;
}

/* 商品标题 */

.goods-title {
	overflow: hidden;
	padding: 0 0rpx 0 0;
	color: #333;
}

/* 商品价格 */

.money-box {
	margin: 10rpx 0;
}

.money-box .goods-price .goods-price_num {
	font-size: 40rpx;
}

.money-box .line-price {
	font-size: 24rpx;
	color: #999;
	padding-top: 6rpx;
	text-decoration: line-through;
	margin-left: 12rpx;
}

/* 商品销量 */

.goods-sales-box .stock {
	display: block;
	text-align: right;
}

/* 商品评论 */

.goods-comment .goods-property-box {
	position: relative;
	padding: 12px;
}

.goods-comment .goods-property-jianTou {
	width: 52rpx;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -13rpx;
}

.goods-comment .goods-property-jianTou image {
	height: 100%;
	width: 100%;
}

.goods-comment-box .comment_btn {
	width: 220rpx;
	margin: 0 auto;
	padding: 20rpx 0;
}

.goods-comment-box .comment_btn text {
	display: block;
	padding: 5rpx 0;
	color: #ff495e;
	font-size: 26rpx;
	text-align: center;
	border: 1px solid #ff495e;
	border-radius: 30rpx;
}

/* banner计数 */

.banner-num {
	position: absolute;
	right: 30rpx;
	margin-top: -70rpx;
	padding: 0 18rpx;
	background: rgba(0, 0, 0, 0.3);
	border-radius: 50rpx;
	color: #fff;
	font-size: 32rpx;
}

.banner-num text:last-child {
	color: rgba(255, 255, 255, 0.6);
	font-size: 26rpx;
}

.footer-fixed .order-number {
	background: #ff92ba;
	color: #fff;
	text-align: center;
}

.footer-fixed .order-number button {
	background: none;
	padding: 0;
	/* font-size: 34rpx; */
	color: #fff;
	line-height: inherit;
	border-radius: 0;
	border: 0;
}

.footer-fixed .order-number button::after {
	content: ' ';
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	left: 0;
	border: none;
	transform: scale(0);
	transform-origin: 0 0;
	box-sizing: border-box;
	border-radius: 0;
}

.footer-fixed .default-btn {
	width: 100%;
	background-color: #ccc;
	color: #fff;
	text-align: center;
	line-height: 92rpx;
}

.footer-fixed .flow_num {
	background: #ff495e;
	position: absolute;
	right: 20rpx;
	top: 10rpx;
	border-radius: 30rpx;
	height: 30rpx;
	min-width: 30rpx;
}

/* 商品详情 */

.goods-detail-box {
	font-size: 28rpx;
}

/* 评价次数 */

.comment-num {
	position: absolute;
	right: 34px;
	top: 50%;
	margin-top: -20rpx;
	font-size: 28rpx;
	color: #333;
}

.top-nav-bar {
	padding: 24rpx;
	font-size: 28rpx;
	color: #333;
}

.goods-fixed-icon contact-button {
	display: block;
}

/* 商品分享 */

.goods__share button.share-btn {
	line-height: normal;
	padding: 0 0 0 10rpx;
	background: none;
	border-radius: 0;
	box-shadow: none;
	font-size: 8pt;
	border: none;
	color: #888;
}

.goods__share button.share-btn::after {
	border: none;
}

.goods__share .share__icon {
	font-size: 46rpx;
	margin-bottom: 5rpx;
}

/* 商品海报 弹出层 */

.pop-poster {
	position: relative;
	background: #fff;
	padding: 42rpx;
	border-radius: 10rpx;
}

/* 关闭按钮 */

.pop-poster .pop-close {
	position: absolute;
	width: 56rpx;
	height: 56rpx;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 0 25rpx rgba(0, 0, 0, 0.15);
	right: -28rpx;
	top: -28rpx;
}

.pop-poster .pop-close text {
	display: block;
}

.pop-poster .poster__image {
	padding: 0 40rpx;
}

.pop-poster .poster__image image {
	box-shadow: 0 0 25rpx rgba(0, 0, 0, 0.15);
	width: 460rpx;
	height: 696.746rpx;
}

.pop-poster .profile-btn button {
	margin-bottom: 0;
}

/* sku选择器 */

.sku-selector {
	padding: 30rpx 20rpx;
}

/* 确认购买弹窗 */

.popup__trade {
	width: 750rpx;
	position: relative;
	padding-bottom: 92rpx;
	z-index: 999;
}

.popup__trade .trade-close {
	position: absolute;
	top: 20rpx;
	right: 20rpx;
	width: 50rpx;
	height: 50rpx;
}

.popup__trade .trade-main {
	background: #fff;
	box-sizing: border-box;
	padding: 24rpx;
}

.popup__trade .footer-fixed {
	position: absolute;
}

.popup__trade .footer-fixed .order-bt {
	width: 100%;
	line-height: unset;
}

.popup__trade .trade-main .goods-info {
	margin-bottom: 10rpx;
}

.popup__trade .trade-main .goods-info .goods-image {
	margin-top: -40px;
	margin-right: 20rpx;
}

.popup__trade .trade-main .goods-info .goods-image image {
	width: 90px;
	height: 90px;
	border: 5rpx solid #fff;
	box-shadow: 0 4rpx 10rpx rgba(220, 220, 220, 0.79);
}

.popup__trade .trade-main .goods-info .money-box {
	margin: 0;
}

.popup__trade .trade-main .goods-info .goods-stock {
	padding-left: 10rpx;
}

.popup__trade .trade-main .buy_number {
	margin: 20rpx 0;
	justify-content: space-between;
}

.popup__trade .trade-main .buy_number .buyNumber {
	color: #888;
	background: #fff;
	border-radius: 10rpx;
	margin-bottom: 10rpx;
}

/* 商品规格 */

.goods-attr {
	padding: 10rpx 0;
}

.goods-attr .goods-attr--scroll {
	max-height: 600rpx;
}

.goods-attr .group-item .tips-text {
	font-size: 26rpx;
	color: #888;
	margin-bottom: 10rpx;
}

.goods-attr .group-item .spec-item {
	display: inline-block;
}

.goods-attr .group-item .spec-item {
	font-size: 26rpx;
	height: 55rpx;
	line-height: 55rpx;
	padding: 0 30rpx;
	margin: 0 20rpx 20rpx 0;
	border-radius: 8rpx;
	color: #888;
	border: 1px solid #e6e6e6;
}

.goods-attr .group-item .spec-item.cur {
	background: #f82169;
	border: 1rpx solid #f82169;
	color: #fff;
}

.goods-attr .group-item .spec-item.cur:after {
	position: absolute;
	bottom: 0;
	right: 0;
	content: '';
	display: inline-block;
	width: 16rpx;
	height: 16rpx;
}

.goods-attr .group-item .spec-item.disabled {
	color: #dedede;
	cursor: not-allowed;
	background: #eee;
	border: 2rpx dashed #dedede;
}

/* 团购提醒 */

.goods__share {
	margin-left: 20rpx;
}

.goods-name {
	padding: 26rpx 20rpx;
}

/* 商品卖点 */

.goods-name .goods-selling-point {
	color: #f20c59;
}

.goods-attention {
	background: url('https://css.gomein.net.cn/plus/style/product/item/images/tq-bg.png?v=2017111401') center no-repeat;
	height: 108rpx;
	color: #fff;
	font-size: 28rpx;
	padding: 10rpx 20rpx;
	box-sizing: border-box;
}

.goods-price {
	margin-right: 20rpx;
}

.goods-attention .price-text {
	font-size: 58rpx;
}

/* .goods-message {} */

.goods-message .line-price {
	text-decoration: line-through;
	margin-bottom: 5rpx;
}

.goods-message .in-tag {
	background-color: #fff;
	color: #ec3467;
	border-radius: 12rpx;
	padding: 1rpx 12rpx;
	margin-right: 10rpx;
}

/* 拼团玩法 */

.rule-nav {
	padding: 24rpx;
	font-size: 29rpx;
}

.rule-nav .rule-simple {
	margin-top: 35rpx;
	color: #737373;
}

.rule-nav .i-number {
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	margin-bottom: 15rpx;
	border: 1rpx dashed #c0c0c0;
}

/* 进行中的团购 */

.corwd {
	padding: 15rpx 0rpx;
	display: flex;
	height: 100rpx;
	line-height: 1;
	justify-content: space-between;
	border-bottom: 1rpx solid #eee;
}

.corwd:last-child {
	border-bottom: none;
}

.corwd_people {
	width: 40%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
}

.corwd_people .corwd_people_images {
	margin-right: 12rpx;
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
	border: 2rpx solid #eee;
}

.corwd_people text {
	font-size: 28rpx;
}

.corwd_time {
	display: flex;
	align-items: center;
	width: 60%;
}

.corwd_time_text {
	width: 60%;
	text-align: center;
}

.corwd_time_title {
	display: block;
}

.corwd_time_title text {
	color: red;
}

.corwd_time_number {
	display: block;
	margin-top: 15rpx;
	font-size: 23rpx;
}

.corwd_time button {
	padding: 0rpx 28rpx;
	line-height: 55rpx;
	text-align: center;
	font-size: 26rpx;
	border-radius: 40rpx;
	color: #fff;
	background: linear-gradient(to right, #fa1e8c 0, #fc1e56 100%);
	border: none;
}

.corwd_time button:after {
	content: none;
	border: none;
}
</style>
